<template>
  <el-container>
    <el-header style="height: 810px; background-color: whitesmoke;">
      <div style="display: flex; width: 100%; height: 95%;">
        <div style="width: 50%; padding: 20px;">
          <h2>阅卷区</h2>
          <el-table :data="paginatedData" stripe style="width: 100%; height: calc(100% - 30px);">
            <!-- 表格列的定义 -->
          </el-table>
        </div>
        <div style="width: 50%; padding: 20px;">
          <h2>答案区</h2>
          <el-table :data="paginatedData" stripe style="width: 100%; height: calc(70% - 30px);">
            <!-- 表格列的定义 -->
          </el-table>
          <el-footer
            style="background-color: white; height: 200px; width: 675px; position: relative; top: 20px;"
          >
            <div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
              <h2 style="color: #333; margin-bottom: 10px;">打分区</h2>
              <el-input v-model="input" style="width: 50%; margin-bottom: 15px;" placeholder="请输入考生得分数" clearable />
              <el-button type="primary" @click="submitScore">提交</el-button>
              <el-popover
                v-model="dialogVisible"
                placement="top"
                title="确认提交"
                width="155"
                trigger="click"
              >
                <p>您确定要提交当前分数吗？</p>
                <div style="text-align: right;">
                  <el-button size="mini" type="text" @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="confirmSubmit">确定</el-button>
                </div>
              </el-popover>
            </div>
          </el-footer>
        </div>
      </div>
    </el-header>
    <el-footer style="display: flex; justify-content: center; align-items: center; height: 70px;">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="AllCommodityList.length"
        style="width: auto;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制弹出框显示状态
      AllCommodityList: [], // 存放所有数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页数量
      input: ''
    }
  },
  computed: {
    paginatedData() {
      return this.AllCommodityList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    submitScore() {
      this.dialogVisible = true // 点击提交时显示确认弹出框
    },
    confirmSubmit() {
      this.dialogVisible = false // 确认后关闭弹出框
      console.log('分数已提交')
      // 这里可以添加提交分数的逻辑
    }
  }
}
</script>
  <style scoped>
  /* 可以在这里添加自定义样式 */
  .el-header {
    display: flex;
    align-items: stretch;
  }

  .el-footer {
    text-align: center;
    padding: 20px 0;
  }
  </style>
